import React from 'react';
//用于表单校验，官网：http://react-component.github.io/form/
import {createForm} from 'rc-form';

import './index.scss';

/**
 * 表单项，直接在属性上配置校验组件：只包含一个校验组件
 * 属性：
 * className：类名。
 * that：formChild所在的React组件。无法通过formChild获取时，需要传。类型：ReactNode。
 * formId：校验组件的id。类型：string。
 * formConfig：校验参数。类型：object。
 * formChild：原始的校验组件，需要使用getFieldDecorator包装。类型：ReactNode。
 * 注意：formChild所在的React组件需要先用createForm()包装，否则，无法正常校验
 */
class FormItem extends React.Component {
  //默认属性
  static defaultProps = {
    className: ''
  };

  constructor(props) {
    super(props);
    this.initStateNode();
  }

  render() {
    let {className, formId, formConfig, formChild, children, ...other} = this.props;
    return (
      <div className={`g-form-item ${className}`} {...other}>
        <div className="g-form-item-body">
          {this.renderFormChild()}
          {children}
        </div>
        {this.renderError()}
      </div>
    );
  }

  /**
   * 加载校验组件
   * 校验组件：使用his.props.form.getFieldDecorator()包装的组件
   */
  renderFormChild() {
    let {formId, formConfig, formChild} = this.props;
    if (!formChild) {
      return;
    }
    if (this.stateNode.props.form) {
      //使用getFieldDecorator绑定组件
      let {getFieldDecorator} = this.stateNode.props.form;
      return getFieldDecorator(formId, formConfig)(formChild);
    } else {
      return formChild;
    }
  }

  /**
   * 错误提示
   */
  renderError() {
    let error = this.getError(); //错误信息

    return (
      <div className="g-form-item-explain" style={{display: error}}>
        {error}
      </div>
    );
  }

  /**
   * 初始化formChild的React组件
   */
  initStateNode() {
    let {that, formChild} = this.props;
    //声明formChild的React组件
    this.stateNode = (formChild && formChild._owner && formChild._owner.stateNode) || that;
  }

  /**
   * 获取子组件数组
   */
  getChildren() {
    let {children} = this.props;
    if (children instanceof Array) {
      return children;
    } else {
      return [children];
    }
  }

  /**
   * 获取错误提示信息
   */
  getError() {
    let {formId} = this.props;
    if (this.stateNode) {
      let {getFieldError} = this.stateNode.props.form;
      return getFieldError(formId);
    }
  }

  /**
   * 获取校验组件的id：该方法保留
   * 校验组件：使用his.props.form.getFieldDecorator()包装的组件
   */
  getIds() {
    return this.getChildren().map((item) => {
      if (item && item.ref) {
        //校验组件的id
        return item.ref.__reactBoundArguments[0];
      } else {
        return undefined;
      }
    });
  }
}

/**
 * 表单，基于rc-form进行封装
 * 参考：https://github.com/react-component/form
 * 注意：使用this.props.form.resetFields()重置表单时，会以最新的initialValue重置。
 */
export default class Form extends React.Component {
  //用于创建表单
  static create = createForm;
  //表单项
  static Item = FormItem;

  //默认属性
  static defaultProps = {
    className: ''
  };

  render() {
    let {className, children, ...other} = this.props;
    return (
      <form className={`g-form ${className}`} {...other}>
        {children}
      </form>
    );
  }
}
